<template>
<div class="Applycourse">


     <el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1']">
       <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>课程管理</template>
          <el-menu-item index="1-3">课程申请</el-menu-item>
         <router-link to="/course2"> <el-menu-item index="1-4">课程记录</el-menu-item></router-link>
         <router-link to="/hiscourse"><el-menu-item index="1-5" >停用记录</el-menu-item></router-link>
         <router-link to="/myLoginUI"> <el-menu-item index="1-6" >退出登录</el-menu-item></router-link>
      </el-submenu>

    </el-menu>
  </el-aside>

  <el-container>



    <el-main>
   <div >
      <el-button type="primary" plain @click="en_disables(4)">批量拒绝</el-button>

      <el-button type="primary" plain @click="en_disables(2)">批量同意</el-button>

    </div>
         <page-table @load-table-data="loadTableData" ref="dataTable" @selection-change="selection"
                        row-key="id">
          <template slot="tb-columns">

             <el-table-column align="center" prop="id" label="课程号"></el-table-column>
             <el-table-column  align="center" prop="lessonname" label="课程名称" ></el-table-column>
            <el-table-column align="center" prop="teachername" label="教师名称"></el-table-column>
            <el-table-column align="center" prop="info" label="简介"></el-table-column>
            <el-table-column align="center" label="状态" :formatter="stateFormat"></el-table-column>

            <el-table-column fixed="right" align="center" width="220" label="操作">
              <template slot-scope="scope">
                <el-button type="primary" plain @click.native="en_disable(scope.row.id,2)">同意申请</el-button>
               <el-divider direction="vertical"></el-divider>
              <el-button  type="primary" plain @click.native="en_disable(scope.row.id,3)">拒绝申请</el-button>
              <el-divider direction="vertical"></el-divider>

              </template>
            </el-table-column>

          </template>
        </page-table>
    </el-main>
  </el-container>
     </el-container>


<Edit :visible='visible' :title='title' :defaultFormData='defaultFormData'
v-if='visible' @close = 'close'/>


 <router-view/>

</div>
</template>
<script>
import PageTable from '@/components/common/PageTable'
import {page,updateUseful,deletes} from '@/api/modules/room3'


export default {
  name: "Applycourse",
  components:{PageTable},
  data() {

    return {
        searchForm:{
          lessonname:''
        },
        multipleSelection: [],
        title:'',

        defaultFormData : {},

        visible:false

    };
  },

  methods:{
    deletes(row){

      this.$refs.dataTable.loadTableData('reload')
    },
    en_disable(id,status){

        updateUseful({ids:id,status:status}).then(res =>{
            this.toast(res.message)
            this.$refs.dataTable.loadTableData('reload')
        }).catch(err=>{
            this.toast(err,2)
            this.$refs.dataTable.loadTableData('reload')
        })
    },
    en_disables(status){
      let ids = [];
        this.multipleSelection.forEach(item => {
            ids.push(item.id)
        })

        updateUseful({ids:ids.join(','),status:status}).then(res =>{
            this.toast(res.message)
            this.$refs.dataTable.loadTableData('reload')
        }).catch(err=>{
            this.toast(err,2)
            this.$refs.dataTable.loadTableData('reload')
        })
    },
    close(val){
      this.visible = false
      if(val){
         this.$refs.dataTable.loadTableData('reload')
      }
    },
    add(row){

       this.visible = true
       this.title= '新增'
       this.defaultFormData =row



    },
     deletes(ids){
        //console.log(row)
         deletes({ids:ids}).then(res =>{
            this.toast(res.message)
            this.$refs.dataTable.loadTableData('reload')
        }).catch(err=>{
            this.toast(err,2)
            this.$refs.dataTable.loadTableData('reload')
        })
    },
    stateFormat(row){

      if(row.status===1){
        return '申请中'
      }else{
        return '不可用'
      }
    },
    loadTableData(filter,callback){
        filter = {
          ...filter,
          ...this.searchForm
        }

        page(filter).then(res => {
          this.total = res.data.total
          let tableData = {
            ...res.data,
            data: res.data.records
          }
          callback(tableData)

        })
    },
    selection(val){
      this.multipleSelection = val;
    },
    search(){

      this.$refs.dataTable.loadTableData('reload')
    },

    reset() {
        this.$refs.searchForm.resetFields()
        this.$refs.dataTable.loadTableData('reload')
      },
  }
};
</script>
<style scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

  .el-aside {
    color: #333;
  }
</style>
